<script lang="ts">
import Vue from 'vue'
import navBar from "@/components/nav-bar/nav-bar.vue";
import {copyFun, getPrice, getTypeImage} from "@/utils/utils";
import {getRefundDetail, refundHandle} from "@/services/refund";
import tips from "@/utils/tips";
import {RefundRecord} from "@/types/store/refund";
import ConfirmPopup from "@/components/confirmPopup/confirmPopup.vue";

export default Vue.extend({
  name: "refund_order_detail",
  components: {ConfirmPopup, navBar},
  data() {
    return {
      orderDetail: {} as RefundRecord,
      confirmPromptShow: false, // 弹窗显示
      selectedRefundStatus: 1,  // 退款状态
    }
  },
  computed: {
    lang() {
      return this.$t('storePages.refundOrderDetail')
    },
  },
  onLoad(options: any) {
    this.getOrderDetail(options.id)
  },
  methods: {
    copyFun,
    getPrice,
    getTypeImage,
    async getOrderDetail(id: string) {
      const currentRefundDetail = await getRefundDetail(id)
      if (currentRefundDetail.code === 200) {
        this.orderDetail = currentRefundDetail.data
        console.log(this.order)
      }
    },
    // 查看瑞款原因照片
    previewImage() {
      uni.previewImage({urls: [this.orderDetail.image]})
    },
    // 弹窗显示
    onConfirmPromptShow(status: number) {
      this.confirmPromptShow = true
      this.selectedRefundStatus = status
    },

    // 确认退款或拒绝退款
    async confirmRefund() {
      const {id} = this.orderDetail
      console.log(this.selectedRefundStatus)
      if (this.selectedRefundStatus === 0) {
        tips.toast('请选择退款状态')
        return
      }
      const refundRes = await refundHandle(id, this.selectedRefundStatus)
      if (refundRes.code === 200) {
        this.confirmPromptShow = false
        await this.getOrderDetail(id)
        tips.toast(refundRes.msg)
      }
    },
  }
})
</script>

<template>
  <view>
    <nav-bar :pageTitle="lang.pageName" navbar-color="#ffffff"/>
    <view :class="['margin-20', locale]">
      <view>

        <!-- 订单详情-->
        <view class="radio-20 padding-30 bg-white gap-20 flex-column" style="margin:20rpx 0 20rpx 0">
          <view class="flex-between">
            <view class="text-32" @longpress="copyFun(orderDetail.order.order_number)">
              {{ orderDetail.order.order_number }}
            </view>
            <!-- 完成或退款-->
            <view
                :class="['default-text label', orderDetail.refund_status === 0 ? 'treat_refunded' : (orderDetail.refund_status === 1 ? 'preview-label':(orderDetail.refund_status === 2 ? 'refunded':''))]">
              {{
                lang.status[orderDetail.refund_status === 0 ? 'pending' : orderDetail.refund_status === 1 ? 'refunded' : orderDetail.refund_status === 2 ? 'rejected' : '']
              }}
            </view>
          </view>

          <view style="background: #D4D4D4; height: 2rpx"/>

          <view class="column flex-1 default-text gap-20">
            <view class="flex-between">
              <view class="color-grey">{{ lang.orderInfo['totalPrice'] }}</view>
              <view class="flex-center ltr color-black">
                <u-icon name="rmb" :size="16" color="#000"/>
                {{ getPrice(orderDetail.refund_amount) }}
              </view>
            </view>
            <view class="flex-between">
              <view class="color-grey">{{ lang.orderInfo['printPages'] }}</view>
              <view>{{ orderDetail.order.page }}x{{ orderDetail.order.paper_count }}{{ otherLang.page }}</view>
            </view>
            <view class="flex-between">
              <view class="color-grey">{{ lang.orderInfo['refundTime'] }}</view>
              <view>{{ orderDetail.created_at }}</view>
            </view>
            <view v-if="orderDetail.phone_number" class="flex-between" @longpress="copyFun(orderDetail.phone_number)">
              <view class="color-grey">{{ lang.orderInfo['refundPhone'] }}</view>
              <view>{{ orderDetail.phone_number }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 订单内容-->
      <view class="radio-20 padding-30 bg-white gap-20 flex-column" style="margin:20rpx 0 20rpx 0">
        <view class="common-title">{{ lang.sections['printDetails'] }}</view>
        <view style="background: #D4D4D4; height: 2rpx"/>

        <view class="flex-between gap-20">
          <view class="flex-center gap-20">
            <view :class="['padding-30 radio-20 center type', getTypeImage(orderDetail.order.ext)]">
              <image :src="`/static/ext/${getTypeImage(orderDetail.order.ext)}.svg`" class="resources-image"/>
            </view>

            <!-- 当前打印类型-->
            <view class="flex-center wrap gap-20">
              <view class="tab-label">{{ otherLang.print_tag[orderDetail.order.paper_size] }}</view>
              <view v-if="orderDetail.order.duplex >= 2" class="tab-label">{{ otherLang.double }}</view>
              <view v-if="orderDetail.order.color === 2" class="tab-label">{{ otherLang.isColor }}</view>
            </view>
          </view>

          <!-- 退款-->
          <view class="flex-end default-text gap-20" v-if="orderDetail.refund_status == 0"
                style="flex-direction: column">
            <view :class="['text-align-center tab-label refunded']" style="border: none"
                  @click.stop="onConfirmPromptShow(2)">
              {{ lang.operations['reject'] }}
            </view>

            <view :class="['text-align-center tab-label preview-label']" @click.stop="onConfirmPromptShow(1)">
              {{ lang.operations['confirm'] }}
            </view>
          </view>
        </view>
      </view>

      <!-- 退款原因-->
      <view class="radio-20 padding-30 bg-white gap-20 flex-column" style="margin:20rpx 0 20rpx 0">
        <view class="common-title">{{ lang.sections['refundReason'] }}</view>
        <view style="background: #D4D4D4; height: 2rpx"/>
        <view class="column-center gap-20 default-text">
          <view v-if="orderDetail.image">
            <image @click="previewImage" :src="'https://printer.ozhas.cn'+orderDetail.image" mode="aspectFit"/>
          </view>
          <view class="color-grey">{{ orderDetail.refund_reason }}</view>
        </view>
      </view>


      <!-- 用户信息-->
      <view v-if="orderDetail.order.user" class="radio-20 padding-30 bg-white gap-20 flex-column"
            style="margin:20rpx 0 20rpx 0">
        <view class="common-title">{{ lang.sections['userInfo'] }}</view>
        <view style="background: #D4D4D4; height: 2rpx"/>

        <view class="flex-center gap-20 default-text">
          <view>
            <image class="avatar" :src="orderDetail.order.user.avatarUrl"/>
          </view>
          <view class="flex-column gap-8">
            <view style="font-weight: 600">{{ orderDetail.order.user.nickname }}</view>
            <view class="color-grey">ID:{{ orderDetail.order.user.id }}</view>
          </view>
        </view>
      </view>

      <view style="height: 100rpx"/>
    </view>

    <!-- 退款-->
    <confirm-popup
        :title="lang.modal['title']" :show="confirmPromptShow" @update:show="confirmPromptShow = $event"
        @confirm="confirmRefund"
    >
      <view class="center default-text line-height-one-six">
        {{ lang.modal[selectedRefundStatus === 1 ? 'confirmRefund' : 'confirmReject'] }}
      </view>
    </confirm-popup>
  </view>
</template>

<style scoped lang="scss">
.avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
}
</style>